<template>
	<view class="app-discuss-info__evaluation-item bg-white e-flex e-flex-items-start">
		<view class="e-m-r-18">
			<e-avatar :defaultUrl="$staticPath('default-headerImg.png')" :src="$fullLink(props.info.userAvatar)"
				size="60rpx"></e-avatar>
		</view>
		<view class="e-flex-1">
			<view class="e-m-b-4">
				<text class="c-regular e-font-22 ">{{props.info.userName}}</text>
			</view>
			<view class="e-m-b-28">
				<text class="e-font-26 ">{{props.info.content}}</text>
			</view>
			<view class="e-flex e-flex-between">
				<text class="e-font-26 c-cc">{{time}}</text>
				<view class="e-flex">
					<image src="../../static/thumbs_active.png" class="img-20 e-m-r-6" @tap="editEvaluationState(2)"
						v-if="props.info.hasLike"></image>
					<image src="../../static/thumbs.png" class="img-20 e-m-r-6" @tap="editEvaluationState(1)" v-else>
					</image>
					<text class="e-font-20 c-regular ">{{props.info.likeNumber}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts">
	import {
		defineComponent
	} from 'vue'

	export default defineComponent({
		options: {
			virtualHost: true
		}
	})
</script>
<script lang="ts" setup>
	import { computed } from 'vue'
	import {
		useCurrentInstance
	} from '@/common/hooks'
	import {
		postAddDiscussEvaluationLike,
		postDelDiscussEvaluationLike
	} from '@/common/request/api'
	import {
			timeFormat
		} from '@/common/utils'
		
	const ctx = useCurrentInstance()

	const props = defineProps<{
		info ?: Object
		isLogin ?: Boolean
	}>()

	const time = computed(() => {
		if (props.info.createTime) {
			return timeFrom(new Date(ctx.info.createTime).getTime()).replace(/刚刚/, ctx.$t('discuss.刚刚')).replace(/分钟前/, ctx.$t('discuss.分钟前')).replace(/小时前/, ctx.$t('discuss.小时前')).replace(/天前/, ctx.$t('discuss.天前'));
		}
		return ''
	})

	const editEvaluationState = (type : number) => {
		if (props.isLogin) {
			let api = type === 1 ? postAddDiscussEvaluationLike : postDelDiscussEvaluationLike
			api(props.info.id).then(res => {
				if (res.code === 200) {
					ctx.$emit('setEvaluationState')
				}
			})
		} else {
			ctx.$goLogin({
				isShowModal: false
			})
		}

	}
</script>

<style lang="scss" scoped>
	.app-discuss-info__evaluation-item {
		padding: 34rpx 20rpx 20rpx 30rpx;
	}

	.c-cc {

		color: #CCCCCC;
	}
</style>